<template>
<div style="width:1200px;margin:0 auto">
  <div class="confirmorder-container">
    <SideNavgation> </SideNavgation>

    <h1>订单信息</h1>
    <div class="project-info">
      <table style="border-collapse: collapse; border-spacing: 0">
        <tbody
          style="
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
          "
        >
          <tr>
            <th style="width: 310px">商品</th>
            <th style="text-align: left; width: 290px">单价</th>
            <th style="text-align: right; width: 115px">数量</th>
            <th>合计</th>
          </tr>
          <tr style="width: 100%">
            <td style="padding-left: 15px; text-align: left; width: 295px">
              <div class="project-content">
                <div class="content-left">
                  <img :src="`/images/index/${index+1}.jpeg`" alt="" />
                </div>
                <div class="content-right">
                  <h2>{{detaillist.keywords}}</h2>
                  <p>北京市</p>
                  <div class="time">{{detaillist.project_label}}</div>
                  <div class="tick-type">
                    <span></span>
                    <p>
                      {{ detaillist.sale_flag_number === "2" ? "电子票" : "实体票" }}
                    </p>
                  </div>
                </div>
              </div>
            </td>
            <td style="text-align: left; width: 290px; margin-left: 120px">
              <p>{{detaillist.salable_price_low/100}}</p>
            </td>
            <td style="margin-left: 210px;width: 17%;">
              <a style=" border: 1px solid #ddd;
            border-right: 0;
            float: left;
            color: #666;
            width: 6px;
            text-align: center;
            padding: 8px;"
              href="javascript:void(0)"
              class="mins"
              @click="changeNum(number, -1)" 
              >-</a
            >
            <input
            style="border: 1px solid #ddd;
            width: 40px;
            height: 33px;
            float: left;
            text-align: center;
            font-size: 14px;"
              autocomplete="off"
              type="text"
               :value="number"
              minnum="1"
              class="itxt"
              
            />
           
            <a
            style=" border: 1px solid #ddd;
            border-left: 0;
            float: left;
            color: #666;
            width: 6px;
            text-align: center;
            padding: 8px;"
              href="javascript:void(0)"
              class="plus"
               @click="changeNum(number, 1)"
              >+</a
            >
           
            </td>
            <td style="width: 130px margin-left: 50px;">
              <p
                style="
                  display: block;
                  margin-block-start: 1em;
                  margin-block-end: 1em;
                  margin-inline-start: 0px;
                  margin-inline-end: 0px;
                  font-size: 16px;
                  

                  color: #fb7299;
                "
              >
                {{ number * detaillist.price_low/100}}
              </p>
              <p
                style="
                  display: block;
                  margin-block-start: 1em;
                  margin-block-end: 1em;
                  margin-inline-start: 0px;
                  margin-inline-end: 0px;
                  color: #fb7299;
                 
                "
              >
                不含运费
              </p>
            </td>
            "
          </tr>
        </tbody>
      </table>
    </div>
    <div class="discounts">
      <div class="discounts-list">
        <p>暂无优惠券</p>
      </div>
    </div>
    <div class="content-block">
      <div class="title">
        <span>联系人</span>
        <p>用于接收重要项目</p>
      </div>
      <div class="content">
        <!-- 姓名 -->
        <div class="content-name" style="margin-bottom: 20px">
          <span
            style="
              font-size: 14px;
              color: #9b9b9b;
              width: 56px;
              text-align: right;
            "
            >姓名</span
          >
          <div class="input">
            <input
              type="text"
              v-model="namevalue"
              placeholder="请输入联系人姓名"
            />
          </div>
        </div>
        <!-- 手机号码 -->
        <div class="content-phone">
          <span
            style="
              font-size: 14px;
              color: #9b9b9b;
              width: 56px;
              text-align: right;
            "
            >手机号</span
          >
          <div class="input">
            <input
              type="text"
              v-model="phonevalue"
              placeholder="请输入联系人手机号"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="total-container">
      <div
        style="
          text-align: right;
          margin-bottom: 15px;
          font-size: 14px;
          line-height: 16px;
          color: #6d757a;
        "
      >
        商品总额
        <span style="float: right; min-width: 130px; color: #222">{{
          number * detaillist.price_low/100
        }}</span>
      </div>
      <div
        style="
          text-align: right;
          margin-bottom: 15px;
          font-size: 14px;
          line-height: 16px;
          color: #6d757a;
        "
      >
        应付金额
        <span
          class="total"
          style="
            float: right;
            min-width: 130px;
            color: #222;
            line-height: 22px;
            font-size: 22px;
            color: #ff66a2;
          "
        >
          {{ number * detaillist.price_low/100}}
        </span>
      </div>
    </div>
    <div
      class="confirm"
      style="display: flex; justify-content: space-between; margin: 10px 0"
    >
      <div class="checklist">
        <div
          class="server-item"
          style="
            margin: 10px 0;
            font-size: 12px;
            line-height: 18px;
            color: #666;
          "
        >
          <span
            class="checkicon"
            @click="change(flag)"
            :class="{ active: flag }"
          ></span
          >'我已经同意并且阅读'
          <span class="content">《bilibili购票服务协议》</span>
          <span class="content">《会员购服务协议》</span>
        </div>
      </div>
      <button class="paybtn" :class="{ active: flag }" @click="topay" style="border:none" >
        下一步支付,￥{{ number * detaillist.price_low/100}}
      </button>
    </div>

  </div>
</div>
</template>

<script>
import {mapGetters} from 'vuex'
import SideNavgation from "../../components/SideNavgation";
export default {
  name: "Platform",
  components: {
    SideNavgation,
  },
  data() {
    return {
      number:this.$route.query.number*1,
      flag: false,
      // detaillist:{},
      totalprice:0,//几个商品所有的价格
      namevalue: "",
      phonevalue: "",
      orderData:{},
      orderTime:'',
      id:'',
      index:0,
        dialogVisible: false
    };
  },
 
  beforeMount() {
    // 得到detail的数据
    this.id = JSON.parse(this.$route.query.id);
    this.index = JSON.parse(this.$route.query.index)*1;
    
  },
  

  mounted() {
    //计算总价
    this.handlertotalprice()
   this.getdetaillist(this.id);
   console.log(this.id)
    console.log(this.index)

   
  },
  methods: {
   getdetaillist(id){
     this.$store.dispatch("detaillist",id);
     
     
    },
    changeNum(number, type) {
        let numbers=number +type
        this.number=numbers
    },
    handlertotalprice(){
    
    
    },
    
   
    change(flag) {
      // console.log(this.detaillist);
      this.flag = !flag;
      
      },
topay(){ 
  
    this.dialogVisible = true
     var time = Date.now()
      let orderTime =new Date(time);
      this.orderTime=orderTime
      
       this.orderData = {　
  　　ticket:this.detaillist.name,
      
     
      time:this.orderTime,
      totalprice:this.number * this.detaillist.price_low/100,
      

   }
  
      // 跳转带菜熟
      let data =JSON.stringify(this.orderData)
      this.$router.push( {path:'pay',query:{orderNo:data}})
   },
  
  },
  computed:{
     ...mapGetters(["detaillist"]),
  }
 
  
};
</script>

<style >

.confirmorder-container {
  width: 100%;
  padding: 15px 40px 40px;
  margin: 40px 0;
  box-sizing: border-box;
  box-shadow: 0 0 2px 0 #cbd0d8;
  border-radius: 4px;
  background: #fff;
}
.confirmorder-container h1 {
  font-weight: 400;
  font-size: 22px;
  line-height: 52px;
  color: #222;
}
.confirmorder-container .project-info {
  margin-bottom: 20px;
  border-bottom: 1px dashed #e7e7e7;
}
.confirmorder-container .project-info tr {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  width: 1080px;
  padding-right: 15px;
  font-size: 12px;
  color: #222;
  box-sizing: border-box;
}
.confirmorder-container .project-info tr th {
  padding: 15px 0;
  line-height: 24px;
  font-size: 14px;
  font-weight: 400;
  color: #6d757a;
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}
.confirmorder-container .project-info tr td {
  padding-left: 15px;
  text-align: left;
  width: 295px;
  padding: 15px 0;
  display: table-cell;
  vertical-align: inherit;
}
.confirmorder-container .project-info tr td .project-content {
  padding-left: 15px;
  text-align: left;
  width: 295px;
}
.confirmorder-container .project-info tr td .project-content .content-left {
  float: left;
  width: 86px;
  height: 114px;
  margin: 5px 0;
}
.confirmorder-container .project-info tr td .project-content .content-left img {
  display: block;
  width: 100%;
  height: 100%;
}
.confirmorder-container .project-info tr td .project-content .content-right {
  padding: 0px 10px 5px 96px;
}
.confirmorder-container .project-info tr td .project-content .content-right h2 {
  max-height: 40px;
  margin-bottom: 15px;
  font-weight: 400;
  overflow: hidden;
  line-height: 20px;
  font-size: 14px;
  color: #222;
}
.confirmorder-container .project-info tr td .project-content .content-right p {
  font-size: 12px;
  color: #6d757a;
}
.confirmorder-container .project-info tr td .project-content .content-right .time {
  white-space: nowrap;
  color: #6d757a;
  margin-right: 4px;
}
.confirmorder-container .project-info tr td .project-content .content-right .tick-type {
  margin-top: 15px;
  font-size: 14px;
  color: #fb7299;
}
.confirmorder-container .project-info tr td .project-content .content-right .tick-type span {
  float: left;
  width: 15px;
  height: 18px;
  margin-right: 5px;
  background: url("images/tickt.png");
  background-size: contain;
}
.confirmorder-container .discounts {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 15px;
}
.confirmorder-container .discounts .discounts-list {
  position: relative;
}
.confirmorder-container .discounts .discounts-list p {
  position: relative;
  width: 300px;
  height: 42px;
  padding: 0 33px 0 15px;
  margin: 0 0 20px;
  color: #222;
  font-size: 14px;
  line-height: 42px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.confirmorder-container .content-block {
  margin-top: 20px;
}
.confirmorder-container .content-block .title {
  height: 18px;
  line-height: 18px;
  padding: 17px 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.confirmorder-container .content-block .title span {
  height: 18px;
  position: relative;
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.confirmorder-container .content-block .title p {
  display: block;
  font-size: 13px;
  line-height: 35px;
  height: 14px;
  margin-left: 13px;
}
.confirmorder-container .content-block .content {
  margin-top: 8px;
}
.confirmorder-container .content-block .content .content-name {
  height: 34px;
  line-height: 34px;
  max-height: 34px;
  background-color: aaf;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.confirmorder-container .content-block .content .content-name .input {
  position: relative;
  width: 400px;
  height: 34px;
  margin-left: 14px;
  display: flex;
  flex-direction: row;
  margin-right: 10px;
}
.confirmorder-container .content-block .content .content-name .input input {
  cursor: auto;
  font-size: 14px;
  padding-left: 14px;
  line-height: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  border-radius: 3px;
  border: none;
  position: relative;
  z-index: 2;
  width: 100%;
  background-color: transparent;
  box-sizing: border-box;
  border: 1px solid #d8d8d8;
}
.confirmorder-container .content-block .content .content-phone {
  height: 34px;
  line-height: 34px;
  max-height: 34px;
  background-color: aaf;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.confirmorder-container .content-block .content .content-phone .input {
  position: relative;
  width: 400px;
  height: 34px;
  margin-left: 14px;
  display: flex;
  flex-direction: row;
  margin-right: 10px;
}
.confirmorder-container .content-block .content .content-phone .input input {
  cursor: auto;
  font-size: 14px;
  padding-left: 14px;
  line-height: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  border-radius: 3px;
  border: none;
  position: relative;
  z-index: 2;
  width: 100%;
  background-color: transparent;
  box-sizing: border-box;
  border: 1px solid #d8d8d8;
}
.confirmorder-container .total-container {
  margin-top: 30px;
  background: #f4f5f7;
  padding: 20px 15px 5px;
}
.confirmorder-container .confirm .checkicon {
  float: left;
  width: 12px;
  height: 12px;
  margin: 3px 5px 3px 0;
  background: url('images/check.png') 50% no-repeat;
  background-size: contain;
}
.confirmorder-container .confirm .checkicon.active {
  width: 12px;
  height: 12px;
  margin: 3px 5px 3px 0;
  background: url('images/dui.png') 50% no-repeat;
  background-size: contain;
}
.confirmorder-container .confirm .paybtn {
      width: 240px;
    height: 50px;
    font-size: 18px;
    color: #99a2aa;
    cursor: default;
    line-height: 50px;
    text-align: center;
    background: #e4eaef;
    border-radius: 4px;
}
.confirmorder-container .confirm .paybtn.active {
    color: #fff;
    background-image: linear-gradient(-48deg,#fe8574,#ff6a9c);
    box-shadow: 0 3px 4px 0 #fdb8cc;
    border-radius: 4px;
}

</style>

